import React from 'react';
import './subBox.less';

class SubBox extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'SubBox';
        this.state = {
            visible:false,
            yesBtn:"确定",
            noBtn:"取消",
            data:[]
        }
    }
    onOK(){/*获取外部confirm方法*/}
    onCancel(){/*获取外部cancel方法*/}
    handleCancel(){
        this.setState({
            visible:false
        })
        this.onCancel()
    }
    handleConfirm(){
        //this.props.handleConfirm()
        this.setState({
            visible:false
        })
        this.onOK()
    }
    show(obj){
        this.setState({
            visible:true,
            title:obj.title,
            text:obj.text,
            yesBtn:obj.yes||"确定",
            noBtn:obj.no||"取消"
        })
        this.onCancel=obj.cancel
        this.onOK=obj.confirm
        var head = this.props.head
        var data = this.state.data
        for(var i=0;i<head.length;i++){
            data[i]=""
        }
        this.setState({
            data:data
        })
    }
    close(){
        this.setState({
            visible:false
        })
    }
    handleInput(i,e){
        var data = this.state.data
        data[i] = e.target.value
        this.setState({
            data:data
        })
    }
    getData(){
        return this.state.data
    }
    componentDidMount(){
        var head = this.props.head
        var data = this.state.data
        for(var i=0;i<head.length;i++){
            data[i]=""
        }
        this.setState({
            data:data
        })
    }
    render() {
        var height=this.props.height
        var width=this.props.width
        return this.state.visible?<div className="tederen-subBox">
            <div className="modal-container" style={{
                width: width+"px",
                marginRight: -width/2+"px"}
                }>
                <div className="modal-head">
                    <div className="modal-title">{this.props.title||this.state.title}</div>
                </div>
                <div className="modal-body">
                    <ul className="input-list">
                    {
                        this.props.head.map((h,i)=>{
                            return <li key={i} className="input-item">
                                <label>{h}：</label>
                                <input type="text" value={this.state.data[i]} onChange={this.handleInput.bind(this,i)}/>
                            </li>
                        })
                    }
                    </ul>
                </div>
                <div className="modal-bottom">
                    <input className="btn-cancel" type="button" value={this.state.noBtn} onClick={this.handleCancel.bind(this)}/>
                    <input className="btn-confirm" type="button" value={this.state.yesBtn} onClick={this.handleConfirm.bind(this)}/>
                </div>
            </div>
            <div className="confirm-mask"></div>
        </div>:null
    }
}

SubBox.defaultProps={
    width: 400,
}

export default SubBox
